'use client'

import { useState, useRef } from 'react'

export default function UploadCard() {
  const [copied, setCopied] = useState(false)
  const [dragActive, setDragActive] = useState(false)
  const [fileName, setFileName] = useState<string | null>(null)
  const email = 'x2jfas@decks.ingauge.ai'
  const inputRef = useRef<HTMLInputElement>(null)

  const handleCopy = async () => {
    await navigator.clipboard.writeText(email)
    setCopied(true)
    setTimeout(() => setCopied(false), 1500)
  }

  // 打开文件选择器
  const handleBrowseClick = () => {
    inputRef.current?.click()
  }

  // 处理文件选择
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setFileName(file.name)
      console.log('📁 文件已选择:', file)
      // TODO: 这里可以触发上传逻辑，例如 uploadFile(file)
    }
  }

  // 拖拽交互事件
  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    setDragActive(true)
  }

  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    setDragActive(false)
  }

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    setDragActive(false)
    const file = e.dataTransfer.files?.[0]
    if (file) {
      setFileName(file.name)
      console.log('📥 拖拽上传文件:', file)
      // TODO: uploadFile(file)
    }
  }

  return (
    <div className="upload-card p-[16px] text-gray-200">
      {/* ====== 顶部提示 ====== */}
      <h3 className="text-[#cbd5e1] text-sm font-semibold tracking-wider mb-4">Screen a new deck</h3>

      {/* ====== PRO TIP ====== */}
      <div className="mb-[12px] flex items-center justify-between bg-[#111827] rounded-xl px-4 py-2 border border-[#1f2937] shadow-[0_0_15px_rgba(0,0,0,0.25)]">
        <div className="flex items-center gap-2">
          <span className="text-[12px] font-semibold tracking-wide">
            <span className="text-[#ec4899]">PRO</span> <span className="text-[#8b5cf6]">TIP</span>
          </span>
          <span className="text-[12px] text-gray-400">Forward decks to</span>
          <span className="px-2 py-1 rounded-md bg-[#0f172a] text-[#e2e8f0] font-mono text-[14px] border border-[#1e293b] shadow-inner">
            {email}
          </span>
          <span className="text-[12px] text-gray-400">and they’ll appear here automatically.</span>
        </div>

        {/* Copy 按钮 */}
        <div
          onClick={handleCopy}
          className="px-3 py-1 text-[12px] rounded-[10px] border border-[#334155] text-gray-200 transition-all duration-300 ease-out
             hover:bg-[linear-gradient(90deg,rgba(124,92,255,0.25),rgba(34,211,238,0.25))]
             hover:border-[rgba(124,92,255,0.45)]
             hover:text-[#e7ecf3]
             hover:-translate-y-[1px] cursor-pointer">
          {copied ? 'Copied!' : 'Copy'}
        </div>
      </div>

      {/* ====== 拖拽上传区 ====== */}
      <div
        onClick={handleBrowseClick}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        className={`border border-dashed rounded-xl h-40 flex flex-col justify-center items-center text-center transition-all duration-300 cursor-pointer ${
          dragActive
            ? 'border-[#38bdf8] bg-[rgba(56,189,248,0.05)]'
            : 'border-[rgba(124,92,255,.35)] hover:border-[#38bdf8]'
        }`}>
        {fileName ? (
          <>
            <p className="font-medium text-gray-200 mb-1">File selected:</p>
            <p className="text-sm text-[#38bdf8] font-mono">{fileName}</p>
          </>
        ) : (
          <>
            <p className="font-medium text-gray-200 mb-1">Drag & drop your decks here</p>
            <p className="text-sm text-gray-500">PDF, PPTX, or a share link</p>

            <div
              className="mt-4 px-4 py-2 border border-[#2b3142] rounded-md hover:bg-[#161b26] transition text-gray-200"
              onClick={handleBrowseClick}>
              Browse files
            </div>
          </>
        )}

        {/* 隐藏的 input 文件选择器 */}
        <input ref={inputRef} type="file" accept=".pdf,.ppt,.pptx" className="hidden" onChange={handleFileChange} />
      </div>

      {/* 进度条（装饰） */}
      <div className="w-full mt-4">
        <div className="track" aria-hidden="true">
          <div className="bar" />
        </div>
      </div>
    </div>
  )
}
